<template>
	<block v-if="userinfo.pay_pass">
		<view class="input-title">密码</view>
		<view class="input-box">
			<up-input
				placeholder="请输入旧密码"
				border="none"
				type="number"
				password
				v-model="old_pay_pass"></up-input>
		</view>
	</block>

	<view class="input-title">确认密码</view>
	<view class="input-box">
		<up-input
			placeholder="请输入新的支付密码"
			border="none"
			password
			v-model="pay_pass"></up-input>
		<up-input
			placeholder="请再次输入新的支付密码"
			border="none"
			password
			v-model="re_pay_pass"></up-input>
		<!-- <view class="code">
			<up-input
				placeholder="请输入验证码"
				border="none"
				v-model="v"></up-input>
			<view class="code-number" @click="getCode">{{time == 10? '获取验证码' : `${time}s`}}</view>
		</view> -->
	</view>

	<!-- <view class="tips" v-if="!userinfo.pay_pass">默认密码：123456</view> -->

	<view class="btn" @click="submit">立即设置</view>
</template>

<script setup>
	import { ref } from 'vue';
	import api from '../../api/api';
	import { useCounterStore } from '../../stores/user';
	import { storeToRefs } from 'pinia'
	const user = useCounterStore()
	const { userinfo } = storeToRefs(user)

	const pay_pass = ref('')
	const re_pay_pass = ref('')
	const old_pay_pass = ref('')

	function submit() {
		if (userinfo.value.pay_pass && !old_pay_pass.value) return uni.$showMsg("请输入旧密码")
		if (!re_pay_pass.value || !pay_pass.value) return uni.$showMsg("请完善新密码")
		if (re_pay_pass.value != pay_pass.value) return uni.$showMsg("两次新密码不一致")

		api.user.set_pay_pass({
			pay_pass: pay_pass.value,
			re_pay_pass: re_pay_pass.value,
			old_pay_pass: old_pay_pass.value
		}).then(res => {
			uni.$showMsg("修改成功")
			user.setInfo()
			setTimeout(() => {
				uni.navigateBack({
					delta: 2
				})
			}, 500)
		})
	}

	const time = ref(10)

	function getCode() {
		if (time.value != 10) return uni.$showMsg("验证码已发送")
		let timer = setInterval(() => {
			if (time.value == 1) {
				clearInterval(timer)
				time.value = 10
				return
			}
			time.value -= 1
		}, 1000);
	}
</script>

<style lang="scss">
	.input-title {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		padding: 32rpx;
	}

	.input-box {
		padding: 0 64rpx;

		>view {
			border-bottom: 2rpx solid #F0F0F0;
			height: 100rpx;
		}

		.code {
			display: flex;
			align-items: center;

			.code-number {
				font-weight: 400;
				font-size: 28rpx;
				color: #F6941D;
			}
		}
	}

	.tips {
		text-align: center;
		color: #F6941D;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F6941D;
		border-radius: 12rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		bottom: 50rpx;
		left: 32rpx;
	}
</style>